<!--
 * @Description: 库存统计报表
-->
<template>
  <div class="inventory-report">
    <div class="inventory-report__header">
      <div>
        <span class="inventory-report__header--title">选择时间：</span>
        <el-date-picker v-model="dateTime" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div>
        <el-button type="primary" @click="searchData()" size="mini" icon="el-icon-search">查询</el-button>
        <el-button @click="kong()" size="mini" icon="el-icon-delete">重置</el-button>
        <el-button type="success" :loading="exportLoading" @click="exportExcel()" size="mini" icon="el-icon-s-data">导出</el-button>
      </div>
    </div>

    <div class="inventory-report__total">
      <div id="order_total_flex">
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">商品总数</div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.goodsNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              实时库存总数
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.amount || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">库存增加数量</div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.increased || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">库存减少数量</div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.decreased || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              待审核门店总数
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.storeWaitAuditNum || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="inventory-report__table">
      <el-table :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border
        v-loading="loading">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column label="商品名称" prop="goodsName" width="235px" align="center"></el-table-column>
        <el-table-column label="实时库存" prop="amount" align="center"></el-table-column>
        <el-table-column label="库存增加量" prop="increased" align="center"></el-table-column>
        <el-table-column label="库存减少量" prop="decreased" align="center"></el-table-column>
        <el-table-column label="有库存门店数" prop="storeWithStockNum" align="center"></el-table-column>
        <el-table-column label="无库存门店数" prop="storeWithoutStockNum" align="center"></el-table-column>
        <el-table-column label="待审核门店数量" prop="storeWaitAuditNum" align="center"></el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="listQuery.current" :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  queryTradeStockStatList,
  queryTradeStockStatHead,
  exportTradeStockStatList
} from '@/api/maineseeReports';
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateTime: '',
      formInline: {
        startDate: '',
        endDate: '',
      },
      totalData: {},
      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 10
      },
      total: 0,
      exportLoading: false
    };
  },
  created() {
    this.searchData();
  },
  methods: {
    searchData() {
      this.formInline.startDate = (this.dateTime && this.dateTime[0]) || '';
      this.formInline.endDate = (this.dateTime && this.dateTime[1]) || '';
      this.listQuery.current = 1;
      queryTradeStockStatHead({
        size: 10,
        current: 1,
        condition: {
          ...this.formInline
        },
        ascs: [],
        descs: [],
      }).then(res => {
        if (res.code == 1) {
          this.totalData = res.result;
        } else {
          this.$message.error(res.message);
        }
      });

      this.getList();
    },

    getList() {
      this.formInline.startDate = (this.dateTime && this.dateTime[0]) || '';
      this.formInline.endDate = (this.dateTime && this.dateTime[1]) || '';
      queryTradeStockStatList({
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
        },
        ascs: [],
        descs: [],
      }).then(res => {
        if (res.code == 1) {
          this.tableData = res.records;
          this.total = res.total;
          this.listQuery.current = res.current;
          this.listQuery.size = res.size;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },

    kong() {
      this.formInline = this.$options.data().formInline;
      this.dateTime = null;
    },
    exportExcel() {
      this.exportLoading = true;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline
        },
        ascs: [],
        descs: []
      }
      exportTradeStockStatList(data).then(res => {
        const byteCharacters = atob(res); //将base64转换为二进制字符串
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);

        const link = document.createElement("a");
        let blob = new Blob([byteArray], {
          type: "application/vnd.ms-excel"
        });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "库存统计报表.xlsx";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      }).finally(() => {
        this.exportLoading = false
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.inventory-report {
  &__header {
    display: flex;
    align-items: center;
    gap: 30px;

    &--title {
      font-size: 12px;
      color: #606266;
      line-height: 40px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }

  &__total {
    margin: 20px 0;

    #order_total_flex {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;

      /deep/ .order_content {
        cursor: pointer;
        width: 200px;
        padding: 20px 0;
        margin: 0 auto;
        text-align: center;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

        .order_total_title {
          color: #000;
        }

        .order_total_info {
          margin-top: 10px;
        }

        .order_data {
          font-size: 1.4em;
          font-weight: bold;
        }
      }

      /deep/ .order_detail {
        width: 200px;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }

      /deep/ .order_content2 {
        width: 60px;
        cursor: pointer;
        padding: 10px 0;
        margin: 0 1px;
        text-align: center;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
    }
  }
}
</style>
